<script setup>
import { ref, reactive } from "vue";
import tabbarVue from "./components/tabbar/index.vue";
import { useRoute } from "vue-router";
const route = useRoute();
const data = reactive({
  menuList: [
    { url: "/home", iconfont: "iconfont icon-home", iconColor: "#f44336", text: "主页" },
    {
      url: "/labels",
      iconfont: "iconfont icon-24gl-tags4",
      iconColor: "#ffa11f",
      text: "标签",
    },
    { url: "/marks", iconfont: "iconfont icon-jihaobi", iconColor: "#0fc70f", text: "标记" },
    // { url: '/settings', iconfont: 'camera-outline', iconColor: '#2196f3', text: '设置'},
    {
      url: "/settings",
      iconfont: "iconfont icon-shezhi",
      iconColor: "#b145e9",
      text: "设置",
    },
  ],
});

const handleChange = (val) => {
  data.currentTab = val;
  // console.log("🚀 ~ file: index.vue ~ line 22 ~ handleChange ~ currentTab", data.currentTab)
};
</script>

<template>
  <div class="app" :class="{ bgcolor: !route.meta.otherBackGroundColor }">
    <router-view v-slot="props">
      <keep-alive include="home">
        <component :is="props.Component"></component>
      </keep-alive>
    </router-view>
    <!-- 底部tabbar -->
    <tabbar-vue
      v-show="!route.meta.hideTabBar"
      :menu="data.menuList"
      @handleChangeCurrentTab="handleChange"
    ></tabbar-vue>
  </div>
</template>

<style lang="less" scoped>
.app {

}
.bgcolor {
    background: var(--primary-background-color);
  }
</style>
